<form #mailConfigFrom="ngForm" class="form">
    <section class="form-block">
        <div class="form-group">
            <label for="mailServer" class="required">{{'CONFIG.MAIL_SERVER' | translate}}</label>
            <label for="mailServer" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="mailServerInput.invalid && (mailServerInput.dirty || mailServerInput.touched)">
                <input name="mailServer" type="text" #mailServerInput="ngModel" [(ngModel)]="currentConfig.email_host.value"
                    required id="mailServer" size="40" [disabled]="disabled(currentConfig.email_host)">
                <span class="tooltip-content">
                    {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                </span>
            </label>
        </div>
        <div class="form-group">
            <label for="emailPort" class="required">{{'CONFIG.MAIL_SERVER_PORT' | translate}}</label>
            <label for="emailPort" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="emailPortInput.invalid && (emailPortInput.dirty || emailPortInput.touched)">
                <input name="emailPort" type="text" #emailPortInput="ngModel" [(ngModel)]="currentConfig.email_port.value"
                    required port id="emailPort" size="40" [disabled]="disabled(currentConfig.email_port)">
                <span class="tooltip-content">
                    {{'TOOLTIP.PORT_REQUIRED' | translate}}
                </span>
            </label>
        </div>
        <div class="form-group">
            <label for="emailUsername">{{'CONFIG.MAIL_USERNAME' | translate}}</label>
            <label for="emailUsername" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="false">
                <input name="emailUsername" type="text" #emailUsernameInput="ngModel" [(ngModel)]="currentConfig.email_username.value"
                    id="emailUsername" size="40" [disabled]="disabled(currentConfig.email_username)">
                <span class="tooltip-content">
                    {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                </span>
            </label>
        </div>
        <div class="form-group">
            <label for="emailPassword">{{'CONFIG.MAIL_PASSWORD' | translate}}</label>
            <label for="emailPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="false">
                <input name="emailPassword" type="password" #emailPasswordInput="ngModel" [(ngModel)]="currentConfig.email_password.value"
                    id="emailPassword" size="40" [disabled]="disabled(currentConfig.email_password)">
                <span class="tooltip-content">
                    {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                </span>
            </label>
        </div>
        <div class="form-group">
            <label for="emailFrom" class="required">{{'CONFIG.MAIL_FROM' | translate}}</label>
            <label for="emailFrom" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right"
                [class.invalid]="emailFromInput.invalid && (emailFromInput.dirty || emailFromInput.touched)">
                <input name="emailFrom" type="text" #emailFromInput="ngModel" [(ngModel)]="currentConfig.email_from.value"
                    required id="emailFrom" size="40" [disabled]="disabled(currentConfig.email_from)">
                <span class="tooltip-content">
                    {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                </span>
            </label>
        </div>
        <div class="form-group">
            <label for="selfReg">{{'CONFIG.MAIL_SSL' | translate}}</label>
            <!--for = selfReg?-->
            <clr-checkbox-wrapper id="emailSSL-wrapper">
                <input type="checkbox" clrCheckbox name="emailSSL" id="emailSSL" [(ngModel)]="currentConfig.email_ssl.value"
                    [disabled]="disabled(currentConfig.email_ssl)" />
                <label>
                    <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right top-7">
                        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                        <span class="tooltip-content">{{'CONFIG.SSL_TOOLTIP' | translate}}</span>
                    </a>
                </label>
            </clr-checkbox-wrapper>
        </div>
        <div class="form-group">
            <label for="insecure">{{'CONFIG.MAIL_INSECURE' | translate}}</label>
            <clr-checkbox-wrapper id="emailInsecure-wrapper">
                <input type="checkbox" clrCheckbox name="emaiInsecure" id="emailInsecure" [ngModel]="!currentConfig.email_insecure.value"
                    [disabled]="disabled(currentConfig.email_insecure)" (ngModelChange)="setInsecureValue($event)" />
                <label>
                    <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right top-7">
                        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                        <span class="tooltip-content">{{'CONFIG.INSECURE_TOOLTIP' | translate}}</span>
                    </a>
                </label>
            </clr-checkbox-wrapper>
        </div>
    </section>
</form>
<div>
    <button type="button" id="config_email_save" class="btn btn-primary" (click)="save()" [disabled]="!isValid() || !hasChanges()">{{'BUTTON.SAVE'
        | translate}}</button>
    <button type="button" class="btn btn-outline" (click)="cancel()" [disabled]="!isValid() || !hasChanges()">{{'BUTTON.CANCEL'
        | translate}}</button>
    <button type="button" class="btn btn-outline" (click)="testMailServer()" [disabled]="!isMailConfigValid()">{{'BUTTON.TEST_MAIL'
        | translate}}</button>
    <span id="forTestingMail" class="spinner spinner-inline" [hidden]="hideMailTestingSpinner"></span>
</div>